<!--
 * @Author: 张卓南
 * @Date: 2023-10-17 23:19:59
 * @LastEditTime: 2023-10-20 20:15:09
 * @Description: 
-->
<template>
  <div>
    <GoBack>
      <div class="flex flex-col items-center justify-center">
        <div class="text-darkBlue dark:text-garyWhite text-22px font-black enter-y">
          预定结果
        </div>
      </div>
    </GoBack>
    <div class="flex justify-center p-8">
      <div class="flex flex-col w-full">
        <div>
          <van-steps :active="active">
            <van-step>预定</van-step>
            <van-step>企微沟通</van-step>
            <van-step>司机同意</van-step>
          </van-steps>
        </div>
      </div>
    </div>

    <div class="card bg-white py-4 mx-auto">
      <div class="flex justify-center">
        <div class="flex flex-col w-full px-8 mb-2">
          <div class="time">
            <div class="item">企微沟通剩余时间</div>
            <van-tag plain type="primary" size="medium">01:29:57</van-tag>
          </div>
        </div>
      </div>
      <div class="flex justify-center px-8">
        <div class="flex flex-col w-full">
          <div>
            <van-card :title="obj.destination" thumb="../../../src/assets/出行.png">
              <template #desc>
                <div class="mt-5">
                  <div>类型:单程</div>
                  <div>开始日期:2023-10-01 16:12:11</div>
                  <div>结束日期:2023-10-01 16:12:11</div>
                </div>
              </template>
            </van-card>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 车辆信息 -->

  <div class="card bg-white py-4 mx-auto mt-8">
    <div class="flex justify-center">
      <div class="flex flex-col w-full px-8 mb-2">车辆信息</div>
    </div>
    <div class="flex justify-center">
      <div class="flex flex-col w-90 px-8 mb-2 info">
        王** 鄂A566** 155 **** 0101
      </div>
    </div>
    <div class="flex justify-center">
      <div class="flex flex-col w-90 px-8 mb-2 code">
        <van-image :src="code" width="50%" />
      </div>
    </div>
    <div class="flex justify-center code">
      <div class="flex flex-col w-90 px-8 mb-2 driver">司机企业微信</div>
    </div>
  </div>

  <div style="  padding: 16px;  position: fixed;width: 100vw;bottom: 0;" class="bg-white  buttom-card">
    <div class="flex bottom-text">
      <div class="px-8 mb-2">预估费用</div>
      <div class="px-8 mb-2">30.00元</div>
    </div>
    <div style="justify-content: space-around" class="flex button px-8">
      <van-button v-if="!obj.id" color="rgb(29, 197, 250)" class="px-16 mb-2" @click="confirm">
        申请
      </van-button>
      <van-button v-if="obj.status == 0 && obj.id&& obj.userType == '0'" color="rgb(29, 197, 250)" class="px-16 mb-2" @click="cancel">
        取消
      </van-button>
      <van-button v-if="obj.status == 0 && obj.id && obj.userType == '1'" color="rgb(29, 197, 250)" class="px-16 mb-2" @click="tongyi">
        同意
      </van-button>
      <van-button v-if="obj.status == 0 && obj.id && obj.userType == '1'" color="rgb(29, 197, 250)" class="px-16 mb-2" @click="jujue">
        拒绝
      </van-button>
      <van-button v-if="obj.status == 1 && obj.id && obj.userType == '1'" color="rgb(29, 197, 250)" class="px-16 mb-2" @click="guanbi">
        关闭订单
      </van-button>

    </div>
  </div>
</template>

<script lang="ts">
import { computed, onMounted, reactive, ref, unref, toRefs } from "vue";
import GoBack from "@/components/GoBack.vue";
import code from "@/assets/二维码.png";
import { useRoute, useRouter } from "vue-router";
import { showToast } from 'vant';
import { searchCe,modifyStatus} from '@/api/server.js'
export default {
  name: "preResult",
  setup() {
    const active = ref(0);
    const router = useRouter();
    const route = useRoute()
    const obj = reactive({
      createBy: "12",
      departureType: "0",
      destination:"武汉软件新城A9栋 => 九峰",
      driver:"12",
      peopleNum
        :
        "1",
      price
        :
        "30",
      source
        :
        "家",

    })
    onMounted(() => {
      if(route.query.id) {
      obj.destination = route.query.destination + '=>' +route.query.source;
      obj.source = route.query.source;
      obj.status = route.query.status;
      obj.id = route.query.id;
      obj.userType=route.query.userType
    }
    })
    console.log(route.query, 'router.params')
    const cancel = () => {
      if(route.query.id) {
        modifyStatus({ids:[route.query.id],status:'4'}).then(_ => {
          showToast('取消成功');
          setTimeout(() => {
            router.back()
          },1500)
        })
      }
      
    };
    const tongyi = () => {
      if(route.query.id) {
        modifyStatus({ids:[route.query.id],status:'1'}).then(_ => {
          showToast('接单成功');
          setTimeout(() => {
            router.back()
          },1500)
        })
      }
      
    };
    const jujue = () => {
      if(route.query.id) {
        modifyStatus({ids:[route.query.id],status:'2'}).then(_ => {
          showToast('已拒绝改定单');
          setTimeout(() => {
            router.back()
          },1500)
        })
      }
    };
    const guanbi = () => {
      if(route.query.id) {
        modifyStatus({ids:[route.query.id],status:'3'}).then(_ => {
          showToast('订单已完成');
          setTimeout(() => {
            router.back()
          },1500)
        })
      }
    };
    const confirm = async () => {
      let obj = {
        source: "家",
        destination: "武汉软件新城A9栋",
        departureTime: "2023-10-19",
        deadline: "2023-10-19",
        showPicker: false,
        departureType: false,
        peopleNum: '1',
        xiaojian: '',
        passenger: '9'
      }

      let res = await searchCe({ ...obj, departureType: obj.departureType ? '1' : "0" })
      showToast('叫车成功，可在交易记录查看');
    };
    return { active, code, cancel, confirm,obj,tongyi,guanbi,jujue };
  },
};
</script>

<style scoped lang="less">
:deep(.van-field__left-icon) {
  display: flex;
}

:deep(.van-card) {
  background: white;
  padding: 0;
}

.card {
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  width: 90%;
}

.time {
  display: flex;
}

.item {
  flex: 1;
  color: rgb(43, 43, 43);
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
}

.info {
  height: 36px;
  background: rgb(17, 192, 232);
  border-radius: 4px;
  /* 自动布局 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px 12px 6px 12px;
}

.code {
  align-items: center;
}

.driver {
  align-items: center;
}

.buttom-card {
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.bottom-text {
  color: rgb(204, 44, 0);
  font-family: Inter;
  font-size: 14px;
  font-weight: 600;
  justify-content: space-between;
}

.button {
  justify-content: space-between;
}
</style>
